<template>
	<view>
		<view class="user-info">
			<view class="user-info-pic"><image src="@/static/user/1.jpg"></image></view>
			<view class="user-info-text">
				<view class="user-info-text-top">王生安</view>
				<view class="user-info-text-bottom">
					<text>24岁</text>
					<text>湖南湘乡</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item">
				<view class="list-item-left">组织</view>
				<view class="list-item-right">xxx组织</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">部门</view>
				<view class="list-item-right">xxx部门</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">专业</view>
				<view class="list-item-right">xxx专业</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">职位</view>
				<view class="list-item-right">xxx职位</view>
			</view>
			<view class="list-item show-icon">
				<view class="list-item-left">电话</view>
				<view class="list-item-right">+86-18512542135</view>
			</view>
		</view>
		<view class="list-btn"><button type="button" @click="handleClick">马上联系</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		handleClick() {
			uni.makePhoneCall({
				phoneNumber: '18512542135' //仅为示例
			});
		}
	}
};
</script>

<style scoped lang="scss">
.user-info {
	background: #ffffff;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 14px 18px;
	box-sizing: border-box;
	.user-info-pic {
		width: 60px;
		height: 60px;
		background: #377fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20px;
		overflow: hidden;
		image {
			width: 60px;
			height: 60px;
		}
	}
	.user-info-text {
		.user-info-text-top {
			font-weight: 500;
			font-size: 20px;
			line-height: 23px;
			color: #333333;
			margin-bottom: 10px;
		}
		.user-info-text-bottom {
			text {
				font-size: 14px;
				line-height: 18px;
				color: #666666;
				margin-right: 10px;
			}
		}
	}
}
.list {
	.list-item {
		background: #ffffff;
		height: 48px;
		display: flex;
		align-items: center;
		margin-bottom: 1px;
		padding: 0 15px;
		box-sizing: border-box;
		position: relative;
		&:last-child {
			margin-bottom: 0px;
		}
		&:active {
			background: #f2f3f4;
		}
		&.show-icon {
			&::after {
				content: '';
				position: absolute;
				width: 5px;
				height: 10px;
				top: 20px;
				right: 15px;
				background: url(../../static/more.png) no-repeat;
			}
		}
		.list-item-left {
			font-size: 16px;
			color: #666666;
			width: 100px;
		}
		.list-item-right {
			font-size: 14px;
			color: #000000;
			flex: 1;
		}
	}
}
.list-btn {
	padding: 0 20px;
	box-sizing: border-box;
	margin-top: 30px;
	button {
		height: 48px;
		background: linear-gradient(270deg, #55bafe -0.03%, #3072ff 100%);
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
		border-radius: 24px;
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		outline: none;
		border: none;
		&:active {
			opacity: 0.9;
		}
	}
}
</style>
